<script setup>
import {onMounted, reactive, ref} from "vue";
import { useAclStore } from "@/stores/aclStore.js";
import AclEdit from "@/views/system/AclEdit.vue";
import AclDetail from "@/views/system/AclDetail.vue";
import AclCreate from "@/views/system/AclCreate.vue";

const aclStore = useAclStore();
const aclList = ref([]);
const aclDetailRef = ref(null);
const aclEditRef = ref(null);
const createAclFormRef = ref(null);
const currentAclId = ref(null);

// 初始化加载权限列表
onMounted(() => {
  fetchAclList();
});

// 获取权限列表
const fetchAclList = async () => {
  console.log('权限列表查询条件:',aclStore.queryList);
  await aclStore.getAclList().then(() => {
    aclList.value = aclStore.aclList;
  });
  console.log("quanx:",aclList.value);
};

// 分页切换
const handleCurrentChange = (val) => {
  console.log('分页切换:',val);
  aclStore.queryList.page = val;
  fetchAclList();
};

// 删除权限
const handleDelete = (id) => {
  aclStore.deleteAcl(id);
};

// 编辑权限
const handleEdit = (aclInfo) => {
  aclEditRef.value?.show(aclInfo);
};

// 新增权限
const handleAdd = () => {
  createAclFormRef.value?.show();
};

// 查看详情
const handleDetail = (id) => {
  currentAclId.value = id;
  aclDetailRef.value?.openDialog();
};

// 重置搜索条件
const resetSearch = () => {
  console.log('重置搜索条件');
  aclStore.queryList = {
    page:1,
    size:10,
    name: "",
    code: "",
    type: ""
  };
  fetchAclList();
}
</script>

<template>
  <div class="acl-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="aclStore.queryList" class="search-form">
        <el-form-item label="权限名称">
          <el-input
              v-model="aclStore.queryList.name"
              placeholder="请输入权限名称"
              clearable
          />
        </el-form-item>
        <el-form-item label="权限码">
          <el-input
              v-model="aclStore.queryList.code"
              placeholder="请输入权限码"
              clearable
          />
        </el-form-item>
        <el-form-item label="权限类型">
          <el-select
              v-model="aclStore.queryList.type"
              placeholder="全部"
              style="width: 80px"
          >
            <el-option label="全部" value="" />
            <el-option label="API" :value="1" />
            <el-option label="菜单" :value="2" />
            <el-option label="按钮" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchAclList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 新增按钮区域 -->
    <div class="action-container">
      <el-button type="success" @click="handleAdd">
        新增
      </el-button>
    </div>

    <!--表格区域-->
    <el-table
        :data="aclList"
        stripe
        border
        highlight-current-row
        style="width: 100%; margin-bottom: 20px;"
    >
      <el-table-column label="权限名称" prop="name" width="180" />
      <el-table-column label="权限码" prop="code" width="150" />
      <el-table-column label="权限类型" width="120" align="center">
        <template #default="{ row }">
          <el-tag
              :type="row.type === 1 ? 'danger' : row.type === 2 ? 'primary' : 'success'"
              size="small"
          >
            {{ row.type === 1 ? 'API' : row.type === 2 ? '菜单' : '按钮' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="资源路径" prop="url" show-overflow-tooltip />
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="scope">
          <el-button
              type="info"
              size="small"
              @click="handleDetail(scope.row.id)"
          >
            详情
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          :total="aclStore.queryList.total"
          :page-size="aclStore.queryList.size"
          :current-page.sync="aclStore.queryList.page"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          @current-change="handleCurrentChange"
          @size-change="(val) => { aclStore.queryList.size = val; fetchAclList(); }"
      />
    </div>

    <AclEdit ref="aclEditRef" />
    <AclDetail ref="aclDetailRef" :acl-id="currentAclId" />
    <AclCreate ref="createAclFormRef" />
  </div>
</template>

<style scoped>
.acl-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 5px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.action-container {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-button + .el-button {
  margin-left: 8px;
}

.el-table {
  font-size: 14px;
}

.el-tag {
  margin: 2px 0;
}
</style>
